<template>
  <div>
      <t-table
        :data="data"
        :columns="WITHDRAW_COLUMNS"
        row-key="id"
        vertical-align="top"
        :hover="true"
        :pagination="pagination"
        :loading="dataLoading"
        :selected-row-keys="selectedRowKeys"
        @page-change="rehandlePageChange"
      >
        <template @WidthdrawalStatus="{row}">
          <t-tag>{{row.WithdrawStatusText}}</t-tag>
        </template>
        <template #op="slotProps">
          <a class="t-button-link" @click="handleClickDetail(slotProps.row)">查询订单</a>
        </template>
      </t-table>

       <t-drawer v-model:visible="drawerVisible" header="订单明细" :footer="null">
         <t-space direction="vertical">
           <p>提现日期：{{orderInfo.CreateDate}}</p>
           <p>提现单号：{{orderInfo.OrderNo}}</p>
           <p>金币额度：{{orderInfo.GoldAmount}}</p>
           <p>提现额度：{{orderInfo.WidthdrawalAmount}}</p>
           <p>提现帐号：{{orderInfo.OpenId}}</p>
           <p>转帐额度：{{orderInfo.PayAmount}}</p>
           <p>转帐单号：{{orderInfo.TradeNo}}</p>
           <p>提现状态：{{orderInfo.StatusTxt}}</p>

         </t-space>

          </t-drawer>

  </div>
</template>

<script setup lang="ts">
  import { ref,reactive, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { MessagePlugin } from 'tdesign-vue-next';
  import { getWithdrawList,getWithdrawOrder } from '@/api/user';
  import { prefix } from '@/config/global';
  import {WITHDRAW_COLUMNS} from './constants'


const data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});
const dataLoading = ref(false);
const confirmVisible = ref(false);
const selectedRowKeys = ref([]);
const drawerVisible = ref(false);
const fetchData =  (paginationInfo:any) => {
  dataLoading.value = true;
  getWithdrawList(paginationInfo).then(ret=>{
     const {items,totalItems,currentPage}=ret
     data.value = items;
     console.log('items',JSON.stringify(data.value))
     pagination.total = totalItems;
     pagination.current = currentPage;

  }).catch(e=>{
    console.log('e  ',JSON.stringify(e))

  }).finally(()=>{
    dataLoading.value = false;
  })

};
fetchData({
    page: pagination.current,
    pageSize: pagination.pageSize,
  });
// 刷新数据
const refresh = async () => {
  pagination.current = 1;
  await fetchData(pagination);
};
const rehandlePageChange = (pageInfo:any) => {
  //console.log(`rehandlePageChange${JSON.stringify(pageInfo)}`);
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  fetchData({page:pageInfo.current,pageSize:pageInfo.pageSize});
};

const orderInfo=ref({})
const handleClickDetail=(info:any)=>{
  console.log('order ',JSON.stringify(info))
  drawerVisible.value=true
  getWithdrawOrder({orderNo:info.OrderNo})
  .then(ret=>{
    console.log('ret',JSON.stringify(ret))
    orderInfo.value=ret
    MessagePlugin.success('该订单状态:'+ret.StatusTxt)
    // if(ret.WidthdrawalStatus!==info.WithdrawStatus)
  })
  .catch(e=>{
    console.log(JSON.stringify(e))
    MessagePlugin.error(e.msg)
  })
}
</script>
